@import "base.less";

@clicked-color: @color-silver4;
.gradient(@color1; @color2) {
    background:@color1;
    background: -moz-linear-gradient(top, @color1 0%, @color2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@color1), color-stop(100%,@color2));
    background: -webkit-linear-gradient(top, @color1 0%,@color2 100%);
    background: -o-linear-gradient(top, @color1 0%,@color2 100%);
    background: -ms-linear-gradient(top, @color1 0%,@color2 100%);
    background: linear-gradient(to bottom, @color1 0%,@color2 100%);
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=0 );*/
}
.jstree-theme (@base-height, @image, @image-height) {
    @correction: (@image-height - @base-height) / 2;
    @correctionWidth: (@image-height - (@base-height/2)) / 2;

    .jstree-node { min-height:@base-height; line-height:@base-height; margin-left:(@base-height/2); min-width:@base-height; }
    .jstree-anchor { line-height:@base-height; height:@base-height; color: @color-silder-dark4; }
    .jstree-icon { width:(@base-height/2); height:@base-height; line-height:@base-height; }
    .jstree-icon:empty { width:(@base-height/2); height:@base-height; line-height:@base-height; }
    &.jstree-rtl .jstree-node { margin-right:@base-height; }
    .jstree-wholerow { height:@base-height; }

    .jstree-node,
    .jstree-icon { background-image:url(); } // source: 32px; @{image}
    .jstree-node { background-position:-(@image-height * 9 + @correctionWidth) -@correction; background-repeat:repeat-y; }
    .jstree-last { background:transparent; }

    .jstree-open > .jstree-ocl { background-position:-(@image-height * 4 + @correctionWidth) -@correction; }
    .jstree-closed > .jstree-ocl { background-position:-(@image-height * 3 + @correctionWidth) -@correction; }
    .jstree-leaf > .jstree-ocl { background-position:-(@image-height * 2 + @correctionWidth) -@correction; }

    .jstree-anchor > .jstree-themeicon { background-position:-(@image-height * 8 + @correctionWidth) -@correction; }

    > .jstree-no-dots {
        .jstree-node,
        .jstree-leaf > .jstree-ocl { background:transparent; }
        .jstree-open > .jstree-ocl { background-position:-(@image-height * 1 + @correctionWidth) -@correction; }
        .jstree-closed > .jstree-ocl { background-position:-@correctionWidth -@correction; }
    }

    .jstree-disabled {
        background:transparent;
        &.jstree-hovered {
            background:transparent;
        }
        &.jstree-clicked {
            background:#efefef;
        }
    }

    .jstree-checkbox {
        background-position:-(@image-height * 5 + @correctionWidth) -@correction;
        &:hover { background-position:-(@image-height * 5 + @correctionWidth) -(@image-height * 1 + @correction); }
    }

    .jstree-clicked {
        > .jstree-checkbox {
            background-position:-(@image-height * 7 + @correctionWidth) -@correction;
            &:hover { background-position:-(@image-height * 7 + @correctionWidth) -(@image-height * 1 + @correction); }
        }
    }
    .jstree-anchor {
        padding: 0 (@grid-gutter-width / 2) 0 0;
        > .jstree-undetermined {
            background-position:-(@image-height * 6 + @correctionWidth) -@correction;
            &:hover {
                background-position:-(@image-height * 6 + @correctionWidth) -(@image-height * 1 + @correction);
            }
        }
    }

    > .jstree-striped { background-size:auto (@base-height * 2); }

    &.jstree-rtl {
        .jstree-node { background-image:url(""); background-position: 100% 1px; background-repeat:repeat-y; }
        .jstree-last { background:transparent; }
        .jstree-open > .jstree-ocl { background-position:-(@image-height * 4 + @correctionWidth) -(@image-height * 1 + @correction); }
        .jstree-closed > .jstree-ocl { background-position:-(@image-height * 3 + @correctionWidth) -(@image-height * 1 + @correction); }
        .jstree-leaf > .jstree-ocl { background-position:-(@image-height * 2 + @correctionWidth) -(@image-height * 1 + @correction); }
        > .jstree-no-dots {
            .jstree-node,
            .jstree-leaf > .jstree-ocl { background:transparent; }
            .jstree-open > .jstree-ocl { background-position:-(@image-height * 1 + @correctionWidth) -(@image-height * 1 + @correction); }
            .jstree-closed > .jstree-ocl { background-position:-@correctionWidth -(@image-height * 1 + @correction); }
        }
    }
    .jstree-themeicon-custom { background-color:transparent; background-image:none; }

    > .jstree-container-ul .jstree-loading > .jstree-ocl { background:url() center center no-repeat; } // source: throbber.gif
}

.jstree-ImpressPages {
    .jstree-node,
    .jstree-icon { background-repeat:no-repeat; background-color:transparent; }
    .jstree-anchor,
    .jstree-wholerow { transition:background-color 0.15s, box-shadow 0.15s; }
    .jstree-hovered { background:@clicked-color; border-radius:2px; box-shadow:inset 0 0 1px #ccc; }
    .jstree-clicked { background:#beebff; border-radius:2px; box-shadow:inset 0 0 1px #999; }
    .jstree-no-icons .jstree-anchor > .jstree-themeicon { display:none; }
    .jstree-disabled {
        background:transparent; color:#666;
        &.jstree-hovered { background:transparent; box-shadow:none; }
        &.jstree-clicked { background:#efefef; }
        > .jstree-icon { opacity:0.8; /* filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'jstree-grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#jstree-grayscale"); /* Firefox 10+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ }
    }
    // search
    .jstree-search { font-style:italic; color:#8b0000; font-weight:bold; }
    // checkboxes
    .jstree-no-checkboxes .jstree-checkbox { display:none !important; }
    &.jstree-checkbox-no-clicked {
        .jstree-clicked {
            background:transparent;
            box-shadow:none;
            &.jstree-hovered { background:@clicked-color; }
        }
        > .jstree-wholerow-ul .jstree-wholerow-clicked {
            background:transparent;
            &.jstree-wholerow-hovered { background:@clicked-color; }
        }
    }
    // drag'n'drop
    #jstree-marker& {
        border-left-color: @color-blue;
        margin-left: -(@grid-gutter-width / 4);
    }
    #jstree-dnd& {
        .jstree-ok,
        .jstree-er { background-image:url(); background-repeat:no-repeat; background-color:transparent; } // source: 32px.png
        i { background:transparent; width:16px; height:16px; }
        .jstree-ok { background-position: -9px -71px; }
        .jstree-er { background-position: -39px -71px; }
    }
    // stripes
    > .jstree-striped { background:url("") left top repeat; }
    // wholerow
    > .jstree-wholerow-ul .jstree-hovered { background:transparent; box-shadow:none; border-radius:0; color: @color-blue; }
    > .jstree-wholerow-ul .jstree-clicked { background:transparent; box-shadow:none; border-radius:0; color: #000; font-weight: bold; }
    .jstree-wholerow { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
    .jstree-wholerow-hovered {  }
    .jstree-wholerow-clicked { background-color: #fff; }
}

// theme variants
.jstree-ImpressPages {
    .jstree-theme(40px, "32px.png", 32px);
    &.jstree-rtl .jstree-node { background-image:url(""); }
    &.jstree-rtl .jstree-last { background:transparent; }
}
.jstree-ImpressPages-small {
    .jstree-theme(18px, "32px.png", 32px);
    &.jstree-rtl .jstree-node { background-image:url(""); }
    &.jstree-rtl .jstree-last { background:transparent; }
}
.jstree-ImpressPages-large {
    .jstree-theme(32px, "32px.png", 32px);
    &.jstree-rtl .jstree-node { background-image:url(""); }
    &.jstree-rtl .jstree-last { background:transparent; }
}

// mobile theme attempt
.jstree-ImpressPages-responsive-disable {
    @base-height: 40px;
    @media (max-width: 768px) {
        // background image
        .jstree-icon { background-image:url(); } // source: 40px.png; @{base-height}.png

        .jstree-node,
        .jstree-leaf > .jstree-ocl { background:transparent; }

        .jstree-node { min-height:@base-height; line-height:@base-height; margin-left:@base-height; min-width:@base-height; white-space:nowrap; }
        .jstree-anchor { line-height:@base-height; height:@base-height; color: @color-silder-dark4; }
        .jstree-icon, .jstree-icon:empty { width:@base-height; height:@base-height; line-height:@base-height; }

        > .jstree-container-ul > .jstree-node { margin-left:0; }
        &.jstree-rtl .jstree-node { margin-left:0; margin-right:@base-height; }
        &.jstree-rtl .jstree-container-ul > .jstree-node { margin-right:0; }

        .jstree-ocl,
        .jstree-themeicon,
        .jstree-checkbox { background-size:(@base-height * 3) (@base-height * 5); }
        .jstree-leaf > .jstree-ocl { background:transparent; }
        .jstree-open > .jstree-ocl { background-position:0 0px !important; }
        .jstree-closed > .jstree-ocl { background-position:0 -(@base-height * 1) !important; }
        &.jstree-rtl .jstree-closed > .jstree-ocl { background-position:-(@base-height * 1) 0px !important; }

        .jstree-anchor > .jstree-themeicon { background-position:-(@base-height * 1) -(@base-height * 1); }

        .jstree-checkbox, .jstree-checkbox:hover { background-position:-(@base-height * 1) -(@base-height * 2); }
        .jstree-clicked > .jstree-checkbox, .jstree-clicked > .jstree-checkbox:hover { background-position:0 -(@base-height * 2); }
        .jstree-anchor > .jstree-undetermined, .jstree-anchor > .jstree-undetermined:hover { background-position:0 -(@base-height * 3); }

        .jstree-anchor { font-weight:bold; font-size:1.1em; text-shadow:1px 1px white; }

        > .jstree-striped { background:transparent; }
        .jstree-wholerow { border-top:1px solid rgba(255,255,255,0.7); border-bottom:1px solid rgba(64,64,64,0.2); background:#ebebeb; height:@base-height; }
        .jstree-wholerow-hovered { background:@clicked-color; }
        .jstree-wholerow-clicked { background:#beebff; }

        // thanks to PHOTONUI
        .jstree-children .jstree-last > .jstree-wholerow { box-shadow: inset 0 -6px 3px -5px #666; }
        .jstree-children .jstree-open > .jstree-wholerow { box-shadow: inset 0 6px 3px -5px #666; border-top:0; }
        .jstree-children .jstree-open + .jstree-open { box-shadow:none; }

        // experiment
        .jstree-node,
        .jstree-icon,
        .jstree-node > .jstree-ocl,
        .jstree-themeicon,
        .jstree-checkbox { background-image:url(); background-size:(@base-height * 3) (@base-height * 5); } // source: 40px.png; @{base-height}.png

        .jstree-node { background-position:-(@base-height * 2) 0; background-repeat:repeat-y; }
        .jstree-last { background:transparent; }
        .jstree-leaf > .jstree-ocl { background-position:-(@base-height * 1) -(@base-height * 3); }
        .jstree-last > .jstree-ocl { background-position:-(@base-height * 1) -(@base-height * 4); }
        /*
        .jstree-open > .jstree-ocl,
        .jstree-closed > .jstree-ocl { border-radius:20px; background-color:white; }
        */

        .jstree-themeicon-custom { background-color:transparent; background-image:none; }
    }
}

.jstree-ImpressPages > .jstree-container-ul > .jstree-node { margin-left:0; margin-right:0; }
